<template>
    <div class="getPacket" v-if="msgInf">
        <page-header @toLastPage="toLastPage" backgroundColor="none" returnWhite>
      <template v-slot:right>
        <div>
          <van-icon name="bars" class="icon" />
        </div>
      </template>
        </page-header>
        <div class="top-red"></div>
         <div class="content">
             <div class="avatar flex f-center">
           <van-image
        width=".8rem"
        height=".8rem"
        radius=".1rem"
        fit="cover"
        :src="msgInf.from.avatar"
      />
          <div class="name">{{msgInf.from.name}}的红包</div>
        </div>
        <div class="tip">{{msgInf.M_PostMessages.message}}</div>
        <div class="money-wrapper" v-if="isOpen&&accept">
            <span class="money">{{msgInf.M_PostMessages.money}}</span>
            <span class="text">元</span>
        </div>
        <div class="save" v-if="isOpen&&accept">已存入零钱，可直接消费
            <van-icon name="arrow" />
        </div>
        <div class="packetStatus" v-if="isOpen">
            1个红包共{{msgInf.M_PostMessages.money}}元
        </div>
        <div class="packetStatus" v-if="!isOpen">
            红包金额{{msgInf.M_PostMessages.money}}元，等待对方领取
        </div>
        <div class="getUser flex van-hairline--top-bottom" v-if="isOpen">
          <div class="left">
                <van-image
        width="1.5rem"
        height="1.5rem"
        radius=".2rem"
        fit="cover"
        :src="msgInf.accept.avatar"
      /> 
          </div>
          <div class="center">
              <div class="username">{{msgInf.accept.name}}</div>
              <div class="time">{{showTime}}</div>
          </div>
          <div class="right">{{msgInf.M_PostMessages.money}}元</div>
        </div>
         </div>
         <div class="time-tip" v-if="!isOpen">
             未领取的红包，将于24小时后发起退款
         </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import { messages,user,image } from '../../../api/collections/index';
import time from '../../../api/libs/time';
export default {
    components:{
        pageHeader
    },
    computed:{
        showTime(){
            return time.gettime(this.msgInf.M_Time)
        }
    },
    data() {
        return {
            id:sessionStorage.getItem('user'),
            msgId:this.$route.params.id,
            isOpen:false,
            accept:false
        }
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        }
    },
      meteor: {
    $subscribe: {
      'userInf': []
    },
      msgInf(){
          const msg = messages.findOne({_id:this.msgId})
          if(msg){
              const user1 = user.findOne({_id:msg.M_ToUserID})
            const user2 = user.findOne({_id:msg.M_FromUserID})
            if(user1&&user2){
                const avatar1 = image.findOne({_id:user1.avatarId})
                const avatar2 = image.findOne({_id:user2.avatarId})
                     msg.accept={
                         name:user1.nickname,
                         avatar:avatar1.base64
                     }
                      msg.from={
                         name:user2.nickname,
                         avatar:avatar2.base64
                     }
                        return msg
            }
          }
      }
      },
      watch:{
          msgInf(){
              if(this.msgInf.M_PostMessages&&this.msgInf.M_PostMessages.isOpen){
                  this.isOpen = true
              }
             if(this.msgInf.M_PostMessages&&this.msgInf.M_ToUserID==this.id){
                  this.accept = true
              }

          }
      }
}
</script>
<style scoped>
.getPacket{
    min-height: 100vh;
    background-color: #fff;
}
    .top-red{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.5rem;
        background-color: #F15441;
    }
    .top-red::after{
    content: '';
    height: 5rem;
    width: 100%;
    position: absolute;
    bottom: -2.3rem;
    left: 0;
    background-color: #F15441;
    border-radius:0 0  100% 100%;
    box-shadow: 0 .05rem .05rem -.05rem #777;
    }
    .icon{
       margin-top:.4rem;
       color:#fff;
    }
    .content{
          padding-top: 5rem; 
    }
    .avatar{
       font-size: .6rem;
       font-weight: 700;
    }
    .name{
        margin-left: .3rem;
    }
    .tip{
        width: 100%;
        text-align: center;
        font-size: .4rem;
        color: #999;
        margin-top: .5rem;
    }
    .packetStatus{
        color: #999;
        font-size: .4rem;
        margin-top: 2rem;
        padding: 0 .5rem .5rem;
        width: 100%;
    }
    .getUser{
        padding: .5rem;
    }
    .left{
        width: 2rem;
    }
    .center{
        width: 5rem;
    }
    .center .username{
        font-size: .6rem;
    }
    .center .time{
        color: #999;
        font-size: .5rem;
    }
    .right{
        font-size: .6rem;
        flex:1;
        text-align: right;
    }
    .time-tip{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: .5rem;
        text-align: center;
        font-size: .5rem;
        color: #666;
    }
    .money-wrapper{
        color: #CCAA78;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }
    .money{
        font-size: 2rem;
        font-weight: 700;
    }
    .text{
        font-size: .7rem;
    }
    .save{
        width: 100%;
        text-align: center;
        color: #CCAA78;
        font-size: .6rem;
        margin-top: .5rem;
    }
</style>